<template>
    <div class="main-cont">
        <div>
            <div class="title">产品价值</div>
            <div class="cont">
                <div class="item-box" v-for="(item,index) in product" :key="index">
                    <img :src="item.img" alt="">
                    <div class="item-title">{{item.title}}</div>
                    <div class="item-depict">{{item.depict}}</div>
                </div>
            </div>
        </div>

        <div>
            <div class="title">合作团队</div>
            <div class="title-min">入驻标书代检平台服务商</div>
            <div class="cont">
                <div class="item-box2" v-for="(item,index) in tuandui" :key="index">
                    <img :src="item.img" alt="">
                </div>
            </div>
        </div>

        <div>
            <div class="title">服务流程</div>
            <div class="cont">
                <div class="item-box3" v-for="(item,index) in fuwu" :key="index">
                    <img :src="item.img" alt="">
                    <div class="item-title">{{item.title}}</div>
                </div>
            </div>
        </div>


    </div>
</template>

<script>
export default {
    name: '',
    data() {
        return {
            product: [
                {
                    title: '专业的团队',
                    depict: '资深的标书编写人员、编辑人员、审查人员等',
                    img: '/images/application/file-check/tuandui.png',
                },
                {
                    title: '行业全覆盖',
                    depict: '深耕招投标各行业多年，标书经验丰富',
                    img: '/images/application/file-check/hangye.png',
                },
                {
                    title: '服务更精细',
                    depict: '拟定方案、文本撰写、排版设计、数据管理等',
                    img: '/images/application/file-check/fuwu.png',
                },
                {
                    title: '合同+保密协议',
                    depict: '参与团队均需签署合同及保密协议，保密性强',
                    img: '/images/application/file-check/hetong.png',
                },
            ],

            tuandui:[
                {
                    img: '/images/application/file-check/td-jsyh.png',
                },
                {
                    img: '/images/application/file-check/td-pfyh.png',
                },
                {
                    img: '/images/application/file-check/td-tpy.png',
                },
                {
                    img: '/images/application/file-check/td-jk.png',
                },
                {
                    img: '/images/application/file-check/td-sokon.png',
                },
            ],

            fuwu: [
                {
                    title: '提交申请资料',
                    img: '/images/application/file-check/tijiao.png',
                },
                {
                    img: '/images/application/file-check/jiantou.png',
                },
                {
                    title: '缴纳服务费用',
                    depict: '拟定方案、文本撰写、排版设计、数据管理等',
                    img: '/images/application/file-check/feiyong.png',
                },
                {
                    img: '/images/application/file-check/jiantou.png',
                },
                {
                    title: '审查后提交反馈文件',
                    img: '/images/application/file-check/shencha.png',
                },
            ],
        };
    },
    mounted() {},
    methods: {},
};
</script>

<style lang="scss" scoped>
.main-cont {
    .title {
        font-size: 20px;
        color: #252525;
        margin: 30px auto;
        text-align: center;
        font-weight: 600;
    }
    .title-min{
        font-size: 16px;
        color: #252525;
        text-align: center;
        margin-bottom: 20px;

    }
    .cont {
        margin-bottom: 30px;
        display: flex;
        justify-content: space-between;
    }

    .item-box {
        width: 265px;
        height: 265px;
        color: #252525;
        // background-color: #f1f5f8;
        background-color: #ebeff3;
        // border: 1px solid;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        padding: 20px 30px;
        img {
            width: 89px;
            height: 89px;
        }
        .item-title {
            font-size: 20px;
            font-weight: 600;
        }
        .item-depict {
            font-size: 16px;
            text-align: center;
        }
    }

    .item-box3{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        padding: 20px 30px;
        width: 240px;

        img {
            max-width: 125px;
            max-height: 125px;
        }
        .item-title {
            margin-top: 20px;
            font-size: 20px;
            font-weight: 600;
        }
    }
}
</style>
